<template>
  <div class="task-detail-container">
    <!-- 任务头部信息卡片 -->
    <div class="task-header-card">
      <div class="task-header">
        <div class="header-content">
          <div class="task-info">
            <div class="title-wrapper">
              <div class="title-icon">
                <Icon icon="ep:document" />
              </div>
              <div class="title-content">
                <h1 class="task-title">{{ taskObj?.name }}</h1>
                <p class="task-subtitle">任务详细信息和执行状态</p>
              </div>
            </div>
            <div class="task-status">
              <el-tag :type="getStatusTagType(taskObj.status)" class="status-tag" size="large">
                <Icon :icon="getStatusIcon(taskObj.status)" class="status-icon" />
                {{ CallTaskstatusEnumMap[taskObj.status] }}
              </el-tag>
            </div>
          </div>

          <div class="action-buttons">
            <div class="primary-actions">
              <div v-if="taskObj.status == 9" class="control-group">
                <el-button
                  v-hasPermi="['call:task:update']"
                  type="danger"
                  @click="controlTask"
                  class="control-btn stop-btn"
                  size="large"
                >
                  <Icon icon="ep:video-pause" class="btn-icon" />
                  停止任务
                </el-button>
              </div>
              <div v-else class="control-group">
                <el-button
                  v-hasPermi="['call:task:update']"
                  type="success"
                  @click="controlTask"
                  class="control-btn start-btn"
                  size="large"
                >
                  <Icon icon="ep:video-play" class="btn-icon" />
                  启动任务
                </el-button>
              </div>
            </div>

            <div class="secondary-actions">
              <el-button type="primary" @click="appendPhone" class="action-btn">
                <Icon icon="ep:plus" class="btn-icon" />
                追加号码
              </el-button>
              <el-button type="warning" @click="taskHeavy" class="action-btn">
                <Icon icon="ep:refresh" class="btn-icon" />
                任务重呼
              </el-button>
              <el-button @click="handleRefresh" class="action-btn refresh-btn">
                <Icon icon="ep:refresh" class="btn-icon" />
                刷新数据
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 任务详细信息卡片 -->
    <div class="task-details-card">
      <div class="details-header">
        <div class="header-left">
          <Icon icon="ep:info-filled" class="details-icon" />
          <h3 class="details-title">任务详情</h3>
        </div>
        <div class="progress-summary">
          <div class="progress-info">
            <span class="progress-label">执行进度</span>
            <el-progress
              :percentage="progress"
              color="#0052cc"
              class="progress-bar"
              :stroke-width="6"
            >
              <span class="progress-text">{{ taskObj.callCount }}/{{ taskObj.numberCount }}</span>
            </el-progress>
          </div>
        </div>
      </div>

      <div class="details-content">
        <!-- 基本信息网格 -->
        <div class="info-grid">
          <div class="info-card">
            <div class="card-header">
              <Icon icon="ep:flag" class="card-icon" />
              <span class="card-title">任务类型</span>
            </div>
            <div class="card-content">
              <el-tag v-if="sipMode == 'cm'" type="primary" class="type-tag">
                {{ CallTypeEnumMap2[taskObj.type] }}
              </el-tag>
              <el-tag v-else type="primary" class="type-tag">
                {{ CallTypeEnumMap[taskObj.type] }}
              </el-tag>
            </div>
          </div>

          <div class="info-card">
            <div class="card-header">
              <Icon icon="ep:cpu" class="card-icon" />
              <span class="card-title">并发模式</span>
            </div>
            <div class="card-content">
              <span class="card-value">{{ concurrOption[taskObj?.concurrenceMode] }}</span>
            </div>
          </div>

          <div class="info-card">
            <div class="card-header">
              <Icon icon="ep:connection" class="card-icon" />
              <span class="card-title">并发倍率</span>
            </div>
            <div class="card-content">
              <span class="card-value">{{ taskObj?.multiplier }}</span>
            </div>
          </div>

          <div class="info-card">
            <div class="card-header">
              <Icon icon="ep:phone" class="card-icon" />
              <span class="card-title">号码总量</span>
            </div>
            <div class="card-content">
              <span class="card-value highlight">{{ taskObj.numberCount }}</span>
            </div>
          </div>

          <div class="info-card">
            <div class="card-header">
              <Icon icon="ep:phone-filled" class="card-icon" />
              <span class="card-title">已呼数量</span>
            </div>
            <div class="card-content">
              <span class="card-value success">{{ taskObj.callCount }}</span>
            </div>
          </div>

          <div class="info-card">
            <div class="card-header">
              <Icon icon="ep:clock" class="card-icon" />
              <span class="card-title">创建时间</span>
            </div>
            <div class="card-content">
              <span class="card-value">{{ formatDate(taskObj.createTime) }}</span>
            </div>
          </div>
        </div>

        <!-- 语音文件信息 -->
        <div v-if="taskObj.type == 2" class="voice-section">
          <div class="section-header">
            <Icon icon="ep:microphone" class="section-icon" />
            <h4 class="section-title">语音文件</h4>
          </div>
          <div class="voice-content">
            <div class="voice-info">
              <Icon icon="ep:document" class="voice-icon" />
              <span class="voice-name">{{ taskObj?.voiceFileName }}</span>
            </div>
            <div class="voice-player">
              <AudioPlayers
                :btnsIcon="true"
                :url="taskObj.voiceFilePath"
                ref="audioPlays"
                v-if="taskObj && taskObj.voiceFilePath"
                class="audio-component"
              />
            </div>
          </div>
        </div>

        <!-- 执行时间安排 -->
        <div class="schedule-section">
          <div class="section-header">
            <Icon icon="ep:calendar" class="section-icon" />
            <h4 class="section-title">执行时间安排</h4>
          </div>
          <div class="schedule-grid">
            <div class="schedule-card" v-for="i in 3" :key="i">
              <div class="schedule-header">
                <Icon icon="ep:calendar" class="schedule-icon" />
                <span class="schedule-title">执行日期 {{ i }}</span>
              </div>
              <div class="schedule-body">
                <div class="schedule-item">
                  <Icon icon="ep:date" class="item-icon" />
                  <div class="item-content">
                    <span class="item-label">执行日期</span>
                    <span class="item-value">
                      {{
                        weekOption
                          .filter((option) => taskObj[`weekday${i}`]?.includes(option.value))
                          .map((item) => item.label)
                          .join(', ')
                      }}
                    </span>
                  </div>
                </div>
                <div class="schedule-item">
                  <Icon icon="ep:clock" class="item-icon" />
                  <div class="item-content">
                    <span class="item-label">执行时间</span>
                    <span class="item-value">
                      {{ taskObj[`startTime${i}`] }} - {{ taskObj[`endTime${i}`] }}
                    </span>
                  </div>
                </div>
                <div v-if="sipMode != 'cm'" class="schedule-item">
                  <Icon icon="ep:key" class="item-icon" />
                  <div class="item-content">
                    <span class="item-label">按键设置</span>
                    <span class="item-value">{{ taskObj[`key${i}`] }}</span>
                  </div>
                </div>
                <div v-if="sipMode != 'cm'" class="schedule-item">
                  <Icon icon="ep:operation" class="item-icon" />
                  <div class="item-content">
                    <span class="item-label">执行动作</span>
                    <span class="item-value">{{ actionOption[taskObj[`action${i}`]] }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计和记录区域 -->
    <div class="content-grid">
      <!-- 统计图表区域 -->
      <div class="stats-section">
        <div class="stats-card">
          <div class="stats-header">
            <Icon icon="ep:data-analysis" class="stats-icon" />
            <h3 class="stats-title">数据统计</h3>
          </div>

          <div class="tabs-wrapper">
            <el-tabs v-model="activeName" @tab-click="handleTabClick" class="enhanced-tabs">
              <el-tab-pane name="1">
                <template #label>
                  <div class="tab-label">
                    <Icon icon="ep:user" class="tab-icon" />
                    <span class="tab-text">坐席成员</span>
                  </div>
                </template>
              </el-tab-pane>
              <el-tab-pane name="3">
                <template #label>
                  <div class="tab-label">
                    <Icon icon="ep:pie-chart" class="tab-icon" />
                    <span class="tab-text">话单状态</span>
                  </div>
                </template>
              </el-tab-pane>
              <el-tab-pane name="2">
                <template #label>
                  <div class="tab-label">
                    <Icon icon="ep:data-line" class="tab-icon" />
                    <span class="tab-text">结果类型</span>
                  </div>
                </template>
              </el-tab-pane>
            </el-tabs>
          </div>

          <div class="tab-content">
            <!-- 坐席成员表格 -->
            <div v-if="activeName == '1'" class="agent-section">
              <div class="table-wrapper">
                <el-table :data="taskObj.agentList" class="agent-table">
                  <el-table-column prop="nickname" label="绑定员工">
                    <template #default="scope">
                      <div class="agent-info">
                        <div class="agent-avatar">
                          <Icon icon="ep:user" />
                        </div>
                        <span class="agent-name">{{ scope.row.nickname }}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="agentNumber" label="坐席工号">
                    <template #default="scope">
                      <div class="agent-number">
                        <Icon icon="ep:postcard" class="number-icon" />
                        <span class="number-text">{{ scope.row.agentNumber }}</span>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>

            <!-- 图表区域 -->
            <div v-if="activeName == '2'" class="chart-section">
              <div class="chart-wrapper">
                <Echart
                  :height="400"
                  :options="resChartOption"
                  v-loading="false"
                  class="enhanced-chart"
                />
              </div>
            </div>

            <div v-if="activeName == '3'" class="chart-section">
              <div class="chart-wrapper">
                <Echart
                  :height="400"
                  :options="codeChartOption"
                  v-loading="false"
                  class="enhanced-chart"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 通话记录区域 -->
      <div class="records-section">
        <div class="records-card">
          <div class="records-header">
            <Icon icon="ep:phone" class="records-icon" />
            <h3 class="records-title">通话记录</h3>
          </div>

          <!-- 搜索区域 -->
          <div class="search-section">
            <el-form
              :model="queryParams"
              ref="queryFormRef"
              :inline="true"
              label-width="68px"
              class="search-form"
            >
              <div class="search-grid">
                <el-form-item label="被叫号码" prop="callee" class="search-item">
                  <el-input
                    v-model="queryParams.callee"
                    placeholder="请输入呼叫号码"
                    clearable
                    @keyup.enter="handleQuery"
                    class="search-input"
                  >
                    <template #prefix>
                      <Icon icon="ep:phone" />
                    </template>
                  </el-input>
                </el-form-item>

                <el-form-item label="呼叫结果" class="search-item">
                  <el-select
                    v-model="queryParams.resultType"
                    placeholder="请选择状态"
                    clearable
                    class="search-select"
                  >
                    <template #prefix>
                      <Icon icon="ep:list" />
                    </template>
                    <el-option label="呼叫成功" value="1" />
                    <el-option label="播放语音时挂断" value="10" />
                    <el-option label="播放语音完挂断" value="11" />
                    <el-option label="系统线路异常" value="90" />
                    <el-option label="黑名单或拦截" value="91" />
                    <el-option label="空号或号码错误" value="92" />
                    <el-option label="客户拒接或挂断" value="93" />
                    <el-option label="客户忙或未接听" value="94" />
                    <el-option label="坐席忙线未接听" value="95" />
                    <el-option label="呼叫失败" value="99" />
                  </el-select>
                </el-form-item>
              </div>

              <div class="search-actions">
                <el-button @click="handleQuery" class="search-btn">
                  <Icon icon="ep:search" class="btn-icon" />
                  搜索
                </el-button>
                <el-button @click="resetQuery" class="reset-btn">
                  <Icon icon="ep:refresh" class="btn-icon" />
                  重置
                </el-button>
              </div>
            </el-form>
          </div>

          <!-- 记录表格 -->
          <div class="table-section">
            <div class="table-wrapper">
              <el-table
                v-loading="loading"
                :data="numberList"
                :stripe="true"
                border
                class="records-table"
              >
                <el-table-column
                  sortable="custom"
                  label="话单状态"
                  align="center"
                  prop="resultType"
                  width="140"
                >
                  <template #default="scope">
                    <div class="result-status">
                      <el-tag
                        v-if="scope.row.resultCode == 'success'"
                        type="success"
                        class="status-tag"
                      >
                        <Icon icon="ep:check" class="tag-icon" />
                        成功
                      </el-tag>
                      <el-tag
                        v-else-if="scope.row.resultCode == 'leak'"
                        type="warning"
                        class="status-tag"
                      >
                        <Icon icon="ep:warning" class="tag-icon" />
                        漏接
                      </el-tag>
                      <el-tag
                        v-else-if="scope.row.resultCode == 'fail'"
                        type="danger"
                        class="status-tag"
                      >
                        <Icon icon="ep:close" class="tag-icon" />
                        失败
                      </el-tag>
                      <el-tag
                        v-else-if="scope.row.resultCode == 'illegal'"
                        type="info"
                        class="status-tag"
                      >
                        <Icon icon="ep:info-filled" class="tag-icon" />
                        错误
                      </el-tag>
                      <span class="result-desc">{{ resultTypeMap[scope.row.resultType] }}</span>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="agentNumber" label="坐席">
                  <template #default="scope">
                    <div class="agent-cell">
                      <Icon icon="ep:postcard" class="cell-icon" />
                      <span class="cell-text">{{ scope.row.agentNumber }}</span>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="被叫" align="left" width="128px" show-overflow-tooltip>
                  <template #default="scope">
                    <div class="phone-cell">
                      <Icon icon="ep:phone" class="cell-icon" />
                      <span class="cell-text">{{ scope.row.encryptCallee }}</span>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column
                  label="应答时间"
                  prop="startTime"
                  show-overflow-tooltip
                  :formatter="dateFormatter"
                />

                <el-table-column
                  label="挂断时间"
                  prop="endTime"
                  show-overflow-tooltip
                  :formatter="dateFormatter"
                />

                <el-table-column label="时长" prop="callSecond" show-overflow-tooltip width="140">
                  <template #default="scope">
                    <div class="duration-cell">
                      <div class="duration-item">
                        <Icon icon="ep:timer" class="duration-icon" />
                        <span class="duration-label">通话:</span>
                        <span class="duration-value">{{ scope.row.callSecond }}秒</span>
                      </div>
                      <div class="duration-item">
                        <Icon icon="ep:money" class="duration-icon" />
                        <span class="duration-label">计费:</span>
                        <span class="duration-value">{{ scope.row.callMinute }}分</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="remark" label="备注" show-overflow-tooltip>
                  <template #default="scope">
                    <span v-if="scope.row.remark" class="remark-text">{{ scope.row.remark }}</span>
                    <span v-else class="no-remark">-</span>
                  </template>
                </el-table-column>

                <el-table-column label="操作" width="140px" fixed="right">
                  <template #default="scope">
                    <div class="table-actions">
                      <el-button
                        link
                        type="primary"
                        @click="openDetail(scope.row.id)"
                        class="table-action-btn"
                      >
                        <Icon icon="ep:view" class="btn-icon" />
                        详情
                      </el-button>
                      <el-button
                        link
                        type="primary"
                        @click="downloadAudio(scope.row)"
                        :disabled="!scope.row.recordUrl"
                        class="table-action-btn"
                      >
                        <Icon icon="ep:download" class="btn-icon" />
                        下载录音
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 分页 -->
            <div class="pagination-wrapper">
              <Pagination
                :total="total"
                v-model:page="queryParams.pageNo"
                v-model:limit="queryParams.pageSize"
                @pagination="getNumberList"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗组件 -->
    <DetailDes ref="detailRef" />
    <AppendTask ref="appendRefs" @success="getDetailObj" />
    <HeavyTask2 v-if="sipMode == 'cm'" ref="heavyRefs" @success="getDetailObj" />
    <HeavyTask v-else ref="heavyRefs" @success="getDetailObj" />
  </div>
</template>

<script setup lang="ts">
import { formatDate, dateFormatter } from '@/utils/formatTime'
import * as TaskApi from '@/api/call/task'
import { RecordApi } from '@/api/call/record'
import DetailDes from '@/views/call/record/detail.vue'
import AppendTask from '../append.vue'
import HeavyTask from '../heavyTask/index.vue'
import HeavyTask2 from '../heavyTask/index2.vue'
import { useUserStore } from '@/store/modules/user'

defineOptions({ name: 'CallTaskDetail' })
const message = useMessage() // 消息弹窗
const CallNumberStatusMap = {
  0: '未呼叫',
  1: '已呼叫'
}
const CallTypeEnumMap = {
  1: '普通群呼',
  2: '语音按键业务'
}
const CallTypeEnumMap2 = {
  1: '群呼转坐席',
  2: '群呼转IVR'
}
const concurrOption = {
  0: '智能',
  1: '固定'
}
const resultTypeMap = {
  1: '呼叫成功',
  10: '播放语音时挂断',
  11: '播放语音完挂断',
  90: '系统线路异常',
  91: '黑名单或拦截',
  92: '空号或号码错误',
  93: '客户拒接或挂断',
  94: '客户忙或未接听',
  95: '坐席忙线未接听',
  99: '呼叫失败'
}
const CallTaskstatusEnumMap = {
  0: '执行完毕',
  1: '等待执行',
  2: '执行错误',
  4: '手动停止',
  9: '执行中'
}
const actionOption = {
  '1': '转接坐席',
  '2': '挂断',
  '3': '加入黑名单并挂断'
}
const weekOption = [
  {
    label: '星期一',
    value: '1'
  },
  {
    label: '星期二',
    value: '2'
  },
  {
    label: '星期三',
    value: '3'
  },
  {
    label: '星期四',
    value: '4'
  },
  {
    label: '星期五',
    value: '5'
  },
  {
    label: '星期六',
    value: '6'
  },
  {
    label: '星期日',
    value: '0'
  }
]

// 获取状态标签类型
const getStatusTagType = (status) => {
  switch (status) {
    case 0:
      return 'success' // 执行完毕
    case 1:
      return 'info' // 等待执行
    case 2:
      return 'danger' // 执行错误
    case 4:
      return 'warning' // 手动停止
    case 9:
      return 'success' // 执行中
    default:
      return 'info'
  }
}

// 获取状态图标
const getStatusIcon = (status) => {
  switch (status) {
    case 0:
      return 'ep:check' // 执行完毕
    case 1:
      return 'ep:clock' // 等待执行
    case 2:
      return 'ep:close' // 执行错误
    case 4:
      return 'ep:switch-button' // 手动停止
    case 9:
      return 'ep:loading' // 执行中
    default:
      return 'ep:info-filled'
  }
}

const activeName = ref('1')
const taskObj = ref({})
const progress = ref(0)
const loading = ref(false)
const numberList = ref([])
const total = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 8,
  taskId: null,
  resultType: undefined,
  callee: undefined
})

const queryFormRef = ref() // 搜索的表单

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getNumberList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 查询number列表 */
const getNumberList = async () => {
  loading.value = true
  try {
    const data = await RecordApi.getRecordPage(queryParams)
    total.value = data.total
    numberList.value = data.list
  } finally {
    loading.value = false
  }
}
/** 刷新 */
const handleRefresh = async () => {
  await getDetailObj()
  await getNumberList()
  ElMessage.success('刷新成功')
}

/** 获取详情 */
const getDetailObj = async () => {
  try {
    loading.value = true
    taskObj.value = await TaskApi.getTask(query.id)
    if (taskObj.value.numberCount !== 0 && taskObj.value.callCount !== 0) {
      progress.value = (taskObj.value.callCount / taskObj.value.numberCount) * 100
    }
    queryParams.taskId = taskObj.value.taskId
    await getNumberList()
    getEcharts(taskObj.value.taskId)
    getCodeEcharts(taskObj.value.taskId)
  } finally {
    loading.value = false
  }
}
/** 打开详情*/
const detailRef = ref()
const openDetail = (id) => {
  detailRef.value.open(id)
}
/*下载录音*/
const downloadAudio = (row) => {
  if (row.recordUrl) {
    const link = document.createElement('a')
    link.href = row.recordUrl
    link.setAttribute('download', 'recording.mp4')
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
}
const codeChartOption = reactive({
  title: {
    text: '话单状态统计',
    left: 'center',
    top: '5%'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    top: '10%',
    left: 'right'
  },
  series: [
    {
      // name: '呼叫结果',
      type: 'pie',
      radius: '50%',
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true, // 显示标签
        formatter: '{b}: {c}' // 自定义标签格式
        // 你可以在这里自定义显示的内容
      },
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})
const resChartOption = reactive({
  title: {
    text: '结果类型统计',
    left: 'center',
    top: '5%'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    top: '10%',
    left: 'right'
  },
  series: [
    {
      // name: '呼叫结果',
      type: 'pie',
      radius: '50%',
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true, // 显示标签
        formatter: '{b}: {c}' // 自定义标签格式
        // 你可以在这里自定义显示的内容
      },
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})
/*数据结果统计*/
const getEcharts = async (taskId) => {
  const data = await TaskApi.getCountTask(taskId)
  data.map((item) => {
    item.name = resultTypeMap[item.name]
  })
  resChartOption.series[0].data = data
}
const codeTypeMap = {
  success: '成功',
  fail: '失败',
  leak: '漏接',
  illegal: '错误'
}
/**话单状态*/
const getCodeEcharts = async (taskId) => {
  const data = await TaskApi.getCountCodeTask(taskId)
  data.map((item) => {
    item.name = codeTypeMap[item.name]
  })
  codeChartOption.series[0].data = data
}
/** 启动/停止操作 */
const controlTask = async () => {
  const data = {
    id: taskObj.value.id,
    action: taskObj.value.status == 9 ? 'stop' : 'start'
  }
  await TaskApi.controlTask(data)
  if (data.action == 'start') {
    ElMessage.success('操作成功，请通知坐席进入呼叫中心并登录话机')
  } else {
    ElMessage.success('操作成功')
  }
  // 刷新列表
  await getDetailObj()
}
const appendRefs = ref(null)
/*追加*/
const appendPhone = () => {
  appendRefs.value.open(queryParams.taskId)
}
const heavyRefs = ref(null)
/*任务重呼*/
const taskHeavy = () => {
  heavyRefs.value.open(taskObj.value.id)
}
const { query } = useRoute() // 路由信息

const sipMode = ref('')
/** 初始化 **/
onMounted(async () => {
  sipMode.value = useUserStore().getSipMode
  if (query.id) {
    await getDetailObj()
    if (timer.value) clearInterval(timer.value)
    timerRersh()
  }
})
const timer = ref(null)
/*定时刷新*/
const timerRersh = () => {
  timer.value = setInterval(async () => {
    await getDetailObj()
    await getNumberList()
  }, 10e3)
}
/*卸载*/
onUnmounted(() => {
  if (timer.value) clearInterval(timer.value)
})
</script>

<style scoped lang="scss">
.task-detail-container {
  padding: 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;

  @media (max-width: 768px) {
    padding: 8px;
  }
}

/* 任务头部卡片 */
.task-header-card {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 82, 204, 0.12);
  border: 1px solid rgba(0, 82, 204, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
  background: white;
}

.task-header {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  color: white;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    transform: translate(50%, -50%);
  }
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  position: relative;
  z-index: 1;

  @media (max-width: 1024px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  @media (max-width: 768px) {
    padding: 20px 16px;
    gap: 16px;
  }
}

.task-info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
  }
}

.title-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;

  @media (max-width: 768px) {
    gap: 12px;
  }
}

.title-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  backdrop-filter: blur(10px);

  @media (max-width: 768px) {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

.title-content {
  flex: 1;
}

.task-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  @media (max-width: 768px) {
    font-size: 22px;
  }
}

.task-subtitle {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
  font-weight: 400;

  @media (max-width: 768px) {
    font-size: 14px;
  }
}

.task-status {
  @media (max-width: 768px) {
    margin-left: 0;
  }
}

.status-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);

  .status-icon {
    font-size: 16px;
  }
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;

  @media (max-width: 1024px) {
    align-items: stretch;
    width: 100%;
  }
}

.primary-actions {
  display: flex;
  gap: 12px;

  @media (max-width: 768px) {
    width: 100%;
  }
}

.control-btn {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  min-width: 140px;

  @media (max-width: 768px) {
    flex: 1;
    min-width: auto;
  }

  &.start-btn {
    background: rgba(16, 185, 129, 0.2);
    color: white;
    border-color: rgba(16, 185, 129, 0.4);

    &:hover {
      background: rgba(16, 185, 129, 0.3);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
    }
  }

  &.stop-btn {
    background: rgba(239, 68, 68, 0.2);
    color: white;
    border-color: rgba(239, 68, 68, 0.4);

    &:hover {
      background: rgba(239, 68, 68, 0.3);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
    }
  }

  .btn-icon {
    margin-right: 8px;
    font-size: 18px;
  }
}

.secondary-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    width: 100%;
    justify-content: space-between;
  }
}

.action-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 500;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);

  &:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
  }

  @media (max-width: 768px) {
    flex: 1;
    font-size: 12px;
    padding: 8px 12px;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 任务详情卡片 */
.task-details-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 82, 204, 0.08);
  border: 1px solid rgba(0, 82, 204, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
}

.details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-bottom: 1px solid rgba(0, 82, 204, 0.1);

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 16px;
  }
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.details-icon {
  color: #0052cc;
  font-size: 24px;
}

.details-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 18px;
  }
}

.progress-summary {
  display: flex;
  align-items: center;
  gap: 16px;

  @media (max-width: 768px) {
    width: 100%;
  }
}

.progress-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;

  @media (max-width: 768px) {
    width: 100%;
    min-width: auto;
  }
}

.progress-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
}

.progress-bar {
  flex: 1;

  :deep(.el-progress__text) {
    font-size: 12px;
    font-weight: 600;
  }
}

.progress-text {
  font-size: 12px;
  color: #0052cc;
  font-weight: 600;
}

.details-content {
  padding: 24px;

  @media (max-width: 768px) {
    padding: 20px 16px;
  }
}

/* 信息网格 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 32px;

  @media (max-width: 768px) {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
  }
}

.info-card {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(0, 82, 204, 0.1);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 82, 204, 0.1);
    border-color: rgba(0, 82, 204, 0.2);
  }

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.card-icon {
  color: #0052cc;
  font-size: 18px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.card-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-value {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;

  &.highlight {
    color: #0052cc;
  }

  &.success {
    color: #10b981;
  }
}

.type-tag {
  font-weight: 600;
  font-size: 12px;
  padding: 6px 12px;
}

/* 语音文件区域 */
.voice-section {
  margin-bottom: 32px;
  padding: 20px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 12px;
  border: 1px solid rgba(14, 165, 233, 0.2);

  @media (max-width: 768px) {
    margin-bottom: 24px;
    padding: 16px;
  }
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.section-icon {
  color: #0ea5e9;
  font-size: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.voice-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.voice-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-icon {
  color: #0ea5e9;
  font-size: 16px;
}

.voice-name {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}

.voice-player {
  flex-shrink: 0;
}

.audio-component {
  border-radius: 8px;
  overflow: hidden;
}

/* 执行时间安排 */
.schedule-section {
  margin-bottom: 32px;

  @media (max-width: 768px) {
    margin-bottom: 24px;
  }
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.schedule-card {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 12px;
  border: 1px solid rgba(245, 158, 11, 0.2);
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.15);
  }
}

.schedule-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: rgba(245, 158, 11, 0.1);
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);

  @media (max-width: 768px) {
    padding: 12px 16px;
  }
}

.schedule-icon {
  color: #f59e0b;
  font-size: 16px;
}

.schedule-title {
  font-size: 14px;
  font-weight: 600;
  color: #92400e;
}

.schedule-body {
  padding: 20px;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.schedule-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;

  &:last-child {
    margin-bottom: 0;
  }
}

.item-icon {
  color: #f59e0b;
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

.item-content {
  flex: 1;
}

.item-label {
  display: block;
  font-size: 12px;
  color: #92400e;
  font-weight: 500;
  margin-bottom: 2px;
}

.item-value {
  display: block;
  font-size: 14px;
  color: #1f2937;
  font-weight: 600;
}

/* 内容网格 */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;

  @media (max-width: 1200px) {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* 统计区域 */
.stats-section {
  display: flex;
  flex-direction: column;
}

.stats-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 82, 204, 0.08);
  border: 1px solid rgba(0, 82, 204, 0.1);
  overflow: hidden;
  height: fit-content;
}

.stats-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-bottom: 1px solid rgba(0, 82, 204, 0.1);

  @media (max-width: 768px) {
    padding: 20px 16px;
  }
}

.stats-icon {
  color: #0052cc;
  font-size: 24px;
}

.stats-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.tabs-wrapper {
  background: #f8fafc;
  border-bottom: 1px solid rgba(0, 82, 204, 0.1);
}

.enhanced-tabs {
  :deep(.el-tabs__header) {
    margin: 0;
    background: transparent;
    padding: 0 24px;

    @media (max-width: 768px) {
      padding: 0 16px;
    }
  }

  :deep(.el-tabs__nav-wrap) {
    &::after {
      display: none;
    }
  }

  :deep(.el-tabs__item) {
    padding: 16px 20px;
    font-weight: 500;
    color: #6b7280;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    border-radius: 8px 8px 0 0;

    &:hover {
      color: #0052cc;
      background: rgba(0, 82, 204, 0.05);
    }

    &.is-active {
      color: #0052cc;
      border-bottom-color: #0052cc;
      background: white;
      font-weight: 600;
    }

    @media (max-width: 768px) {
      padding: 12px 16px;
    }
  }
}

.tab-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-icon {
  font-size: 16px;
}

.tab-text {
  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.tab-content {
  padding: 24px;
  min-height: 400px;

  @media (max-width: 768px) {
    padding: 20px 16px;
  }
}

/* 坐席表格 */
.agent-section {
  .table-wrapper {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
  }
}

.agent-table {
  :deep(.el-table__header) {
    background: #f8fafc;

    th {
      background: #f8fafc !important;
      color: #374151;
      font-weight: 600;
      border-bottom: 2px solid #e5e7eb;
      padding: 16px 12px;
    }
  }

  :deep(.el-table__row) {
    &:hover {
      background: rgba(0, 82, 204, 0.02) !important;
    }
  }

  :deep(.el-table__cell) {
    padding: 16px 12px;
    border-bottom: 1px solid #f1f5f9;
  }
}

.agent-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agent-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
}

.agent-name {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}

.agent-number {
  display: flex;
  align-items: center;
  gap: 8px;
}

.number-icon {
  color: #6b7280;
  font-size: 14px;
}

.number-text {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  font-family: 'Monaco', 'Menlo', monospace;
}

/* 图表区域 */
.chart-section {
  .chart-wrapper {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #fafafa;
  }

  .enhanced-chart {
    background: white;
    border-radius: 12px;
  }
}

/* 记录区域 */
.records-section {
  display: flex;
  flex-direction: column;
}

.records-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 82, 204, 0.08);
  border: 1px solid rgba(0, 82, 204, 0.1);
  overflow: hidden;
  height: fit-content;
}

.records-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-bottom: 1px solid rgba(0, 82, 204, 0.1);

  @media (max-width: 768px) {
    padding: 20px 16px;
  }
}

.records-icon {
  color: #0052cc;
  font-size: 24px;
}

.records-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

/* 搜索区域 */
.search-section {
  padding: 24px;
  background: #f8fafc;
  border-bottom: 1px solid rgba(0, 82, 204, 0.1);

  @media (max-width: 768px) {
    padding: 20px 16px;
  }
}

.search-form {
  display: flex;
  align-items: end;
  gap: 16px;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
}

.search-grid {
  display: flex;
  gap: 16px;
  flex: 1;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 12px;
  }
}

.search-item {
  margin-bottom: 0;
  min-width: 200px;

  @media (max-width: 768px) {
    min-width: auto;
  }

  :deep(.el-form-item__label) {
    font-weight: 500;
    color: #374151;
    font-size: 14px;
  }
}

.search-input,
.search-select {
  :deep(.el-input__wrapper) {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
      border-color: #0052cc;
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
      border-color: #0052cc;
    }
  }
}

.search-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    width: 100%;
    justify-content: center;
  }
}

.search-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 600;
  color: white;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 82, 204, 0.3);
  }

  @media (max-width: 768px) {
    flex: 1;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.reset-btn {
  border: 2px solid #e5e7eb;
  color: #6b7280;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    border-color: #d1d5db;
    color: #374151;
    transform: translateY(-1px);
  }

  @media (max-width: 768px) {
    flex: 1;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 表格区域 */
.table-section {
  padding: 24px;

  @media (max-width: 768px) {
    padding: 20px 16px;
  }
}

.table-wrapper {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  margin-bottom: 20px;
}

.records-table {
  :deep(.el-table__header) {
    background: #f8fafc;

    th {
      background: #f8fafc !important;
      color: #374151;
      font-weight: 600;
      border-bottom: 2px solid #e5e7eb;
      padding: 16px 12px;
    }
  }

  :deep(.el-table__row) {
    transition: all 0.2s ease;

    &:hover {
      background: rgba(0, 82, 204, 0.02) !important;
      transform: scale(1.001);
    }
  }

  :deep(.el-table__cell) {
    padding: 16px 12px;
    border-bottom: 1px solid #f1f5f9;
  }
}

.result-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.status-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;

  .tag-icon {
    font-size: 12px;
  }
}

.result-desc {
  font-size: 11px;
  color: #6b7280;
  text-align: center;
  line-height: 1.2;
  font-weight: 500;
}

.agent-cell,
.phone-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cell-icon {
  color: #6b7280;
  font-size: 14px;
  flex-shrink: 0;
}

.cell-text {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}

.duration-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.duration-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.duration-icon {
  color: #6b7280;
  font-size: 12px;
  flex-shrink: 0;
}

.duration-label {
  color: #6b7280;
  font-weight: 500;
  flex-shrink: 0;
}

.duration-value {
  color: #1f2937;
  font-weight: 600;
}

.remark-text {
  font-size: 14px;
  color: #1f2937;
  line-height: 1.4;
}

.no-remark {
  color: #9ca3af;
  font-size: 14px;
  font-style: italic;
}

.table-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;

  @media (max-width: 768px) {
    gap: 8px;
  }
}

.table-action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.2s ease;
  min-width: 70px;
  justify-content: center;
  font-weight: 500;

  &:hover {
    background: rgba(0, 82, 204, 0.1);
    transform: translateY(-1px);
  }

  &:disabled {
    color: #c0c4cc;
    cursor: not-allowed;

    &:hover {
      background: transparent;
      transform: none;
    }
  }

  .btn-icon {
    font-size: 12px;
  }
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  padding: 20px 0;

  :deep(.el-pagination) {
    @media (max-width: 768px) {
      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
    }
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .task-detail-container {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }

  .task-header-card,
  .task-details-card,
  .stats-card,
  .records-card {
    background: #374151;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }

  .details-header,
  .stats-header,
  .records-header,
  .search-section {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .details-content,
  .tab-content,
  .table-section {
    background: #374151;
  }

  .task-title,
  .details-title,
  .stats-title,
  .records-title {
    color: #f9fafb;
  }

  .info-card {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .card-title,
  .section-title,
  .schedule-title {
    color: #f9fafb;
  }
  .card-title,
  .section-title,
  .schedule-title {
    color: #f9fafb;
  }

  .card-value,
  .item-value,
  .desc-value,
  .days-text,
  .time-text,
  .key-text,
  .action-text,
  .file-name,
  .progress-text,
  .agent-info,
  .agent-number,
  .phone-cell,
  .duration-value,
  .remark-text {
    color: #f9fafb;
  }

  .card-label,
  .item-label,
  .desc-label,
  .content-icon,
  .label-icon,
  .duration-label,
  .duration-icon,
  .cell-icon,
  .number-icon,
  .agent-icon {
    color: #d1d5db;
  }

  .task-details-card,
  .stats-card,
  .records-card {
    background: #374151;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .details-header,
  .stats-header,
  .records-header {
    background: #4b5563;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .details-content,
  .tab-content,
  .table-container {
    background: #374151;
  }

  .schedule-card {
    background: #4b5563;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .schedule-card-header {
    background: #6b7280;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .enhanced-descriptions {
    :deep(.el-descriptions__body) {
      .el-descriptions__table {
        .el-descriptions__cell {
          border-color: #4b5563;

          &.is-bordered-label {
            background: #4b5563;
            color: #f9fafb;
          }

          .el-descriptions__content {
            color: #f9fafb;
          }
        }
      }
    }
  }

  .agent-table,
  .records-table {
    :deep(.el-table__header) {
      background: #4b5563;

      th {
        background: #4b5563 !important;
        color: #f9fafb;
        border-bottom-color: #6b7280;
      }
    }

    :deep(.el-table__cell) {
      border-bottom-color: #4b5563;
      background: #374151;
    }

    :deep(.el-table__row) {
      background: #374151;

      &:hover {
        background: #4b5563 !important;
      }
    }
  }

  .enhanced-tabs {
    :deep(.el-tabs__header) {
      background: #4b5563;
    }

    :deep(.el-tabs__item) {
      color: #d1d5db;

      &:hover,
      &.is-active {
        color: #60a5fa;
      }

      &.is-active {
        border-bottom-color: #60a5fa;
      }
    }
  }

  .search-form {
    .search-input,
    .search-select {
      :deep(.el-input__wrapper) {
        background: #4b5563;
        border-color: rgba(255, 255, 255, 0.1);

        .el-input__inner {
          color: #f9fafb;
        }
      }
    }

    :deep(.el-form-item__label) {
      color: #d1d5db;
    }
  }

  .result-desc,
  .no-remark {
    color: #9ca3af;
  }

  .chart-container {
    background: #374151;
  }

  .voice-file-info {
    .file-name {
      color: #f9fafb;
    }
  }

  .progress-info {
    :deep(.el-progress__text) {
      color: #f9fafb !important;
    }
  }
}
</style>
